<template>
  <view>
    <view class="like-goods-container">
      <view v-for="(item, index) in goodsList" :key="index" class="like-goods-item">
        <goodsItem class-name="likeItem" :show-sub-name="showSubName" :image-radius="imageRadius" image-width="100%" :goods-data="item" layout="vertical" from-type="likeList" @click="itemClick" />
      </view>
    </view>
    <view v-if="loading && !nomore" class="loading-tip">-- 加载中 --</view>
    <view v-else-if="!loading && nomore" class="loading-tip">-- 没有更多了 --</view>
  </view>
</template>
<script>
import goodsItem from '@/components/goodsItem'
export default {
  components: {
    goodsItem
  },
  props: {
    showSubName: { type: Boolean, default: true }, // 是否显示商品副标题
    imageRadius: { type: String, default: '20rpx' }, // 商品图片圆角
    from: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listQuery: {
        page_size: 10,
        page_no: 1,
        tag_name: '爆款'
      },
      loading: false,
      nomore: false,
      goodsList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listQuery = {
        page_size: 10,
        page_no: 1,
        tag_name: '爆款'
      }
      this.loading = false
      this.nomore = false
      this.goodsList = []
      this._getRecommend()
    },
    async _getRecommend() {
      if (this.loading || this.nomore) return
      this.loading = true
      const res = await this.$api.homeApi.getSubjectTag(this.listQuery)
      if (res.success) {
        if (this.listQuery.page_no === 1) {
          this.goodsList = []
        }
        if (res.data.goods_list && res.data.goods_list.length < this.listQuery.page_size) {
          this.nomore = true
        }
        this.goodsList = this.goodsList.concat(res.data.goods_list)
      }
      this.loading = false
      this.$emit('getCommendData', this.goodsList.length > 0)
    },
    loadMore() {
      if (this.loading || this.nomore) return
      this.listQuery.page_no++
      this._getRecommend()
    },
    itemClick(item) {
      uni.setStorage({
        key: 'firstseat',
        data: '购物车'
      })
      uni.setStorage({
        key: 'preseat',
        data: '猜您喜欢'
      })
      if (this.from === 'home') {
        uni.setStorage({
          key: 'firstseat',
          data: '首页_列表'
        })
        // this.$sensorTrack('CLICKBUTTON', {
        //   button_name: 'good_show',
        //   page_name: 'main'
        // })
        this.$trackSDK.track('bx.home.list.click', '', {
          title: '为你推荐列表',
          goods_id: item.goods_id,
          goods_name: item.title
        })
      } else if (this.from === 'h5_gift') { // 29.9礼包支付成功页的猜你喜欢
        this.$sensorTrack('clinklist', {
          page_name: 'payment_sucess',
          button_name: item.goods_id
        })
      }
    }
  }
}
</script>
<style lang="scss">
.like-goods-container {
  /* display: flex;
  flex-wrap: wrap;
  padding: 20rpx 12rpx;
  justify-content: space-between;
  overflow: hidden; */
  padding: 6rpx;
  box-sizing: border-box;
  background-color: #f5f5f5;
  .like-goods-item {
    width: 50%;
    padding: 6rpx;
    box-sizing: border-box;
    display: inline-block;

    .likeItem,
    goods-item>view{
      background-color: #fff;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 10rpx  0;
}
</style>
